<template>
  <div class="search">
    <div class="top">
      <van-icon name="arrow-left" />
      <div class="input">
        <van-icon name="search" />
        <input @input="input" v-model="value" placeholder="请输入关键词" type="text" />
      </div>
      <span @click="search">{{value==''?'取消':'搜索'}}</span>
    </div>
    <div class="content">
      <div v-show="value==''">
        <div class="history">
          <span style="font-size: 14px;">搜索历史</span>
          <van-icon @click="del" name="delete-o" />
        </div>
        <ul>
          <li v-for="(item,index) in keywordList" :key="index">{{item}}</li>
        </ul>
      </div>
      <div class="list" v-show="value!=''">
        <course-list v-for="(item,index) in list" :key="index" :itemObj="item"></course-list>
      </div>
    </div>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import courseList from "@/components/courseList";
import { getCourseBasis } from "../../request/home";
export default {
  components: {
    courseList
  },
  setup(props) {
    const data = reactive({
      value: "",
      list: [],
      keywordList: JSON.parse(localStorage.getItem('keywordList'))||[]
    });
    const search = () => {
      data.keywordList.unshift(data.value);
      if(data.keywordList.length>5){
        data.keywordList.splice(5,1)
      }
      localStorage.setItem('keywordList',JSON.stringify(data.keywordList))
      getCourseBasis({ params: { keywords: data.value } }).then(res => {
        console.log(res);
        data.list = res.data.data.list;
      });
      if(data.value==''){
        data.list=[]
      }
    };
    const input=()=>{
        data.list=[]
    }
    const del=()=>{
        data.keywordList=[]
        localStorage.removeItem('keywordList')
    }
    return { ...toRefs(data), search ,input,del};
  }
};
</script>
<style lang="scss" scoped>
.search {
  background: #f2f3f5;
  width: 100%;
  height: 100vh;
}
.top {
  height: 77px;
  padding: 14px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  .input {
    width: 90%;
    background: #f7f8fa;
    padding: 13px 10px;
    input {
      outline: none;
      border: none;
      width: 90%;
      background: #f7f8fa;
    }
  }
}
.content {
  .history {
    display: flex;
    height: 47px;
    padding: 0 20px;
    align-items: center;
    justify-content: space-between;
  }
}
ul{
    padding: 20px;
    display: flex;
    li{
        padding: 10px;
        margin: 10px;
        background:#ffffff;
        border-radius: 10px;
        font-size: 16px;
    }
}
</style>